<template>
  <div ref="echartDom" v-bind="$attrs"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose, defineEmits} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  barData: {
    type: Object,
    default: () => {
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let tempSeriesData = props?.barData?.barData?.map((x, i) => {
      return {
        data: x,
        type: 'bar',
        stack: props?.barData?.legendData?.[i],
        name: props?.barData?.legendData?.[i],
        yAxisIndex: i,
        markLine: props?.barData?.markLineData?.length === 2 || (props?.barData?.markLineData?.length === 1 && i === 0) ? {
          symbol: ['none'], //['none']表示是一条横线；['arrow', 'none']表示线的左边是箭头，右边没右箭头；['none','arrow']表示线的左边没有箭头，右边有箭头
          label: {
            position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
            color: i === 0 ? '#ea7f8c' : '#f8cc90',
            padding: [0, pxToRem(-350 * props?.dialogData?.fontSizeTimes), 0, 0],
            formatter: (params) => {
              return `${i === 0 ? '停止供应预警线' : '去化周期预警线'}：${params.value}个月`
            },
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
          },
          silent: true, //鼠标悬停事件 true没有，false有
          data: [
            {
              silent: true, //鼠标悬停事件 true没有，false有
              lineStyle: { //警戒线的样式 ，虚实 颜色
                type: "dashed", //样式  ‘solid’和'dotted'
                color: i === 0 ? '#ea7f8c' : '#f8cc90',
                width: 1   //宽度
              },
              yAxis: props?.barData?.markLineData?.[i] // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
            }
          ]
        } : undefined
      }
    })
    let option = {
      tooltip: {
        trigger: 'axis',
        formatter: (val) => {
          return (
            `${val[0].name}月` + '<br>' +
            `${val[0].marker + val[0].seriesName}：${val[0].value}月` + '<br>' +
            `${val[1].marker + val[1].seriesName}：${val[1].value}万㎡`
          )
        }
      },
      barMaxWidth: pxToRem(11 * props?.dialogData?.fontSizeTimes),
      legend: {
        icon: 'rect',
        x: 'center',
        y: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 0),
        itemWidth: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        itemHeight: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        textStyle: {
          color: 'white',
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
        },
        data: props?.barData?.legendData
      },
      grid: {
        left: `${props?.dialogData?.fontSizeTimes === 1 ? 3 : 5}%`,
        right: `${props?.dialogData?.fontSizeTimes === 1 ? 3 : 5}%`,
        bottom: `${props?.dialogData?.fontSizeTimes === 1 ? 3 : 0}%`,
        top: props?.dialogData?.fontSizeTimes === 1 ? '20%' : '10%',
        containLabel: true
      },
      dataZoom: { // 数据过多内部拖动逻辑
        type: "inside",
        zoomLock: true, // 不可缩放
        startValue: 0,
        endValue: props?.dialogData?.fontSizeTimes === 1 ? 7 : 5,
      },
      xAxis: {
        type: 'category',
        data: props?.barData?.xAxisData,
        axisLabel: {
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          color: 'white',
          fontWeight: 'lighter',
          formatter: (value, index) => {
            if (props.barData?.overStopSupplyIndexArr?.includes(index)) {
              return `{a|${value}月}`
            } else if (props.barData?.overSalesCycleIndexArr?.includes(index)) {
              return `{b|${value}月}`
            } else {
              return `${value}月`
            }
          },
          rich: {
            a: {
              color: '#ea7f8c'
            },
            b: {
              color: '#f8cc90'
            }
          }
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: true, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
      },
      yAxis: [
        {
          name: `去化周期：月`,
          nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 25),
          min: 0,
          max: (value) => value.max,
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            padding: [0, 0, 0, pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 50 : 15)]
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            color: 'white'
          },
          position: 'left',
        },
        {
          name: `库存面积：万㎡`,
          nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 25),
          min: 0,
          max: (value) => value.max || props?.barData?.yAxisDefaultMaxValue,
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            padding: [0, 0, 0, pxToRem(props?.dialogData?.fontSizeTimes === 1 ? -50 : 0)]
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            color: 'white'
          },
          position: 'right',
        }
      ],
      series: tempSeriesData
    }
    option && myChart.value.setOption(option, true);

    myChart.value.on('legendselectChanged', (params) => {
      event.stopPropagation();
    })
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h280 {
  height: 280px;
}

.dialog-h280 {
  width: 1120px;
  height: 500px;
}
</style>